<template>
    <div class="swiper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="swiper in swiperList" :key="swiper.id">
          <img :src="swiper.imgUrl" :alt="swiper.alt">
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
    export default {
      data(){
        return{
          swiperOption:{
            pagination: {
              el: '.swiper-pagination'
            },
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            }
          },
          swiperList:[
            {
              "id":"01",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/5daa78ddf9a3e3aca32195e079b9545d.jpg",
              "alt":"banner图"
            },
            {
              "id":"02",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg",
              "alt":"banner图"
            },
            {
              "id":"03",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/81743f7e8589990dd413cccadf315f8b.jpg",
              "alt":"banner图"
            },
            {
              "id":"04",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg",
              "alt":"banner图"
            },
            {
              "id":"05",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/5daa78ddf9a3e3aca32195e079b9545d.jpg",
              "alt":"banner图"
            },
            {
              "id":"06",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/c807f8e462d269397489ef90b16f61b7.jpg",
              "alt":"banner图"
            },
            {
              "id":"07",
              "imgUrl":"http://img1.qunarzz.com/piao/fusion/1805/fe/ca8ed7adc3ff9f02.jpg",
              "alt":"banner图"
            },
            {
              "id":"08",
              "imgUrl":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/e0c5d91cb9b435518bb223b81b70874e.jpg",
              "alt":"banner图"
            }
          ]
        }
      }
    }
</script>

<style scoped>
  .swiper{
    width: 100%;
    height: 0;
    background-color: #eee;
    padding-bottom: 26.67%;
  }
  .swiper img{
    width: 100%;
    height: 100%;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    background: #fff;
  }
</style>
